<template>
  <div class="app-container calendar-list-container">
    <el-form :rules="rules" ref="dataForm" :model="user" label-position="right" label-width="220px" style='width: 600px; margin-left:50px;'>
      <el-form-item label="登录名">
        <el-input v-model="user.username" v-bind:disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="user.nickname"></el-input>
      </el-form-item>
      <el-form-item label="头像">
        <el-upload action="https://upload-z1.qbox.me" accept="image/*" :on-success = 'afterUpload' :data="dataObj" drag :multiple="false" :before-upload="beforeUpload" :show-file-list="false">
          <img v-if="avatarUrl" :src="user.avatar.url+'?imageView2/2/w/200/h/200'" class="avatar">
          <div v-else>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </div>
        </el-upload>
        <div class="el-upload__tip">请上传png、jpg及jpeg格式图片(大小2M以下,建议分辨率 xx * xx)</div>
      </el-form-item>
    </el-form>
    <div slot="footer" style="text-align:center">
      <el-button @click="">取 消</el-button>
      <el-button type="primary" @click="updateUser">修 改</el-button>
    </div>
  </div>
</template>

<script>
  import { updateUserInfo } from '@/api/jb'
  import { getToken } from '@/api/qiniu'
  import waves from '@/directive/waves'
  // import { MessageBox } from 'element-ui'
  import Cookies from 'js-cookie'

  export default {
    name: 'info',
    directives: {
      waves
    },
    data() {
      return {
        user: {
          nickname: undefined,
          username: undefined,
          avatar: {
            _id: undefined,
            __type: 'File',
            className: '_File',
            url: undefined
          }
        },
        dataObj: { token: '', key: '' },
        avatarUrl: undefined,
        qiniuParams: {
          fileName: 'useravatar',
          platform: 'qiniu'
        },
        rules: {
          nickname: [{ required: true, message: '昵称不能为空', trigger: 'change' }]
        }
      }
    },
    created() {
      this.user.nickname = Cookies.get('nickname')
      this.user.username = Cookies.get('username')
      this.user.avatar.url = Cookies.get('avatarUrl')
      this.user.avatar._id = Cookies.get('avatarId')
      this.avatarUrl = this.user.avatar.url
    },
    methods: {
      beforeUpload() {
        const _self = this
        return new Promise((resolve, reject) => {
          getToken(this.qiniuParams).then(response => {
            const key = response.data.data.name
            const token = response.data.data.token
            _self._data.dataObj.token = token
            _self._data.dataObj.key = key
            resolve(true)
          }).catch(err => {
            console.log(err)
            reject(false)
          })
        })
      },
      afterUpload(res) {
        this.user.avatar._id = res.data.file._id
        this.user.avatar.url = res.data.file.url
        this.avatarUrl = res.data.file.url
      },
      updateUser() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            var temp = {
              nickname: undefined,
              avatar: {
                _id: undefined,
                __type: 'File',
                className: '_File',
                url: undefined
              }
            }
            const userId = Cookies.get('userId')
            if (this.user.avatar._id !== undefined) {
              temp.avatar = this.user.avatar
            } else {
              temp.avatar = undefined
            }
            temp.nickname = this.user.nickname
            updateUserInfo(userId, temp).then(() => {
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success',
                duration: 2000
              })
              Cookies.set('nickname', temp.nickname)
              if (this.user.avatar._id !== undefined) {
                Cookies.set('avatarUrl', this.user.avatar.url)
                Cookies.set('avatarId', this.user.avatar._id)
              }
            })
          }
        })
      }
    }
  }
</script>

